<template>
    <div class="backUserManage">
        <div class="experience_inputs">
            <div class="creatBtn">
                <addbUser></addbUser>  
            </div>
            <!-- <div class="operate_inputs">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="在职状态：" placeholder="请选择">
                        <el-select v-model="formInline.grade">
                            <el-option label="在职正常" value="1"></el-option>
                            <el-option label="在职异常" value="2"></el-option>
                            <el-option label="离职" value="3"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="search_btn" type="primary" @click="onSubmit"><i class="el-icon-search"></i>查询</el-button>
                        <el-button class="reset_btn" type="primary" @click="onSubmit"><i class="el-icon-refresh"></i>清空查询</el-button>
                    </el-form-item>
                </el-form>
            </div> -->
        </div>
        <el-table
            v-loading="loading2"
            element-loading-text="加载中..."
            :data="userList"
            stripe 
            size="mini"
            border resizable
            style="width: 100%"
            :height="tableHeight">
            <el-table-column
                label="用户ID"
                prop="userid"
                :align="align">
            </el-table-column>
            <el-table-column
                label="登录名"
                prop="username"
                :align="align">
            </el-table-column>
            <el-table-column
                label="用户组"
                prop="rolename"
                :align="align">
            </el-table-column> 
            <!-- <el-table-column
                label="归属合作校"
                prop="assistant"
                :align="align">
            </el-table-column> -->
            <el-table-column
                label="真实姓名"
                prop="nickname"
                :align="align">
            </el-table-column>
            <el-table-column
                label="英文昵称"
                prop="enname"
                :align="align">
            </el-table-column> 
            <el-table-column
                label="Email"
                prop="email"
                :align="align">
            </el-table-column>
            <el-table-column
                label="电话"
                prop="mobile"
                :align="align">
            </el-table-column>
            <el-table-column
                label="QQ"
                prop="qq"
                :align="align">
            </el-table-column> 
            <el-table-column
                label="Skype"
                prop="skype"
                :align="align">
            </el-table-column> 
            <!-- <el-table-column
                label="最后登录时间"
                prop="lastlogintime"
                :align="align"
                :width="columWidth">
            </el-table-column>  -->
            <el-table-column label="最后登录时间" :align="align">
                <template slot-scope="scope">{{scope.row.lastlogintime | transData}} </template>
            </el-table-column>
            <el-table-column
                label="最后登陆地点"
                prop="lastloginip"
                :align="align">
            </el-table-column>                
            <el-table-column 
                align="center"
                min-width="200"
                label="操作">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="editUserInfo(scope.row.userid)">编辑用户资料</el-button>
                    <!-- <el-button
                        size="mini"
                        @click="open2(scope.row.userid)">在职异常</el-button> -->
                    <el-button
                        size="mini"
                        @click="open3(scope.row.userid)">离职</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="page_block">
            <el-pagination
                background
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-size="page_size"
                small
                layout="prev, pager, next, jumper"
                :total="totalCount">
            </el-pagination>
        </div>
        
         <!-- 编辑用户资料 -->
        <el-dialog title="编辑后台用户资料" :modal=false :visible.sync="dialogFormVisible1">
            <el-form :model="userInfo">
                <el-form-item label="用户名：" :label-width="formLabelWidth">
                    <el-input v-model="userInfo.username"></el-input>
                </el-form-item>
                <el-form-item label="密码：" :label-width="formLabelWidth">
                    <el-input type='password' v-model="userInfo.password"></el-input>
                </el-form-item>
                <el-form-item label="Email：" :label-width="formLabelWidth">
                    <el-input v-model="userInfo.email"></el-input>
                </el-form-item>
                <el-form-item label="真实姓名：" :label-width="formLabelWidth">
                    <el-input v-model="userInfo.realname"></el-input>
                </el-form-item>
                <el-form-item label="英文名：" :label-width="formLabelWidth">
                    <el-input v-model="userInfo.enname"></el-input>
                </el-form-item>
                <el-form-item label="手机号：" :label-width="formLabelWidth">
                    <el-input v-model="userInfo.mobile"></el-input>
                </el-form-item>
                <el-form-item label="QQ：" :label-width="formLabelWidth">
                    <el-input v-model="userInfo.qq"></el-input>
                </el-form-item>
                <el-form-item label="skype：" :label-width="formLabelWidth">
                    <el-input v-model="userInfo.skype"></el-input>
                </el-form-item>
                <el-form-item label="所属线下校：" :label-width="formLabelWidth">
                    <div v-if='userInfo.parent'>{{userInfo.parent | judgeXX}}</div>
                    <div v-if='!userInfo.parent'></div>
                </el-form-item>
                <el-form-item label="用户组：" placeholder="超级管理员" :label-width="formLabelWidth">
                   <el-select v-model="userInfo.roleid">
                        <el-option v-for='(role,i) in roleList' :key='i' :label='role.name' :value="role.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button class="dialog_close" @click="dialogFormVisible1 = false">取 消</el-button>
                <el-button class="dialog_confirm" type="primary" @click="submitEdit">保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import addbUser from '../components/buttons/addbUser.vue'
    import teacherCard from '../components/teacherCard.vue'
    import base from '../api/base.js'
    import md5 from 'js-md5'
    import {formatDate} from '../../static/js/date.js'
    export default {
        components:{
            addbUser,teacherCard
        },
        filters:{
            transData(time){
                return formatDate(new Date(time * 1000), 'yyyy-MM-dd hh:mm');
            },
            judgeXX(param){
                if(param.company){
                    return param.company;
                }else{
                    if(param.realname){
                        return param.realname;
                    }else{
                        return param.username;
                    }
                }
            }
        },
        data() {
            return {
                tableHeight:window.innerHeight-300,
                loading2:true,
                userid:'',
                userList:[],
                roleList:'',//角色列表
                formInline: {
                    classname: '',
                    range:'',
                },
                // 分页数据
                currentPage: 1,
                cur_page:1,
                page_size:15,
                state:'',//设置用户状态
                userInfo:{
                    password:'',
                    email:'',
                    realname:'',
                    enname:'',
                    mobile:'',
                    qq:'',
                    skype:'',
                    roleid:''
                },
                totalCount:0,
                beforeAddwidth:'60%',
                dialogFormVisible1:false,
                dialogFormVisible2:false,
                dialogFormVisible3:false,
                columWidth:120,
                formLabelWidth: '180px',
                align:'center',
            }
        },
        methods: {
            onSubmit() {
                console.log(this.dialogFormVisible1)
            },
            getRoleList(){
                this.$axios({
                    url: base.baseUrl+"/school/setting/get-role-list",
                    method: "POST",
                    header: { 'content-type': 'application/x-www-form-urlencoded' },
                    data:{
                        token:localStorage.token
                    },
                    transformRequest: [function (data) {
                        let ret = ''
                        for (let it in data) {
                            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                        }
                        return ret
                    }],
                }).then(res => {
                    if(res.data.code==200){
                        this.roleList=res.data.data;
                    }else if(res.data.code==-2){
                        this.$router.push('/login');
                    } 
                });
            },
            handleCurrentChange(val) {
                this.loading2=true
                this.cur_page=val;
                this.getUserList();
            },
            getUserList(){
                this.$axios({
                    url: base.baseUrl+"/school/agent/get-user-list",
                    method: "POST",
                    header: { 'content-type': 'application/x-www-form-urlencoded' },
                    data:{
                        token:localStorage.token,
                        p:this.cur_page,
                        page_size:this.page_size
                    },
                    transformRequest: [function (data) {
                        let ret = ''
                        for (let it in data) {
                            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                        }
                        return ret
                    }],
                }).then(res => {
                    if(res.data.code==200){
                        this.loading2=false
                        if(res.data.data){
                            this.userList=res.data.data.agentList;
                            this.totalCount=Number(res.data.data.pages.total_count);
                        }                  
                    }else if(res.data.code==-2){
                        this.$router.push('/login');
                    } 
                });
            },
            getUserInfo(){
                this.$axios({
                    url: base.baseUrl+"/school/agent/get-user-info",
                    method: "POST",
                    header: { 'content-type': 'application/x-www-form-urlencoded' },
                    data:{
                        token:localStorage.token,
                        userid:this.userid
                    },
                    transformRequest: [function (data) {
                        let ret = ''
                        for (let it in data) {
                            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                        }
                        return ret
                    }],
                }).then(res => {
                    if(res.data.code==200){
                        this.userInfo=res.data.data;
                    }else if(res.data.code==-2){
                        this.$router.push('/login');
                    } 
                });
            },
            editUserInfo(uid){
                this.userid=uid
                this.dialogFormVisible1=true
                this.getUserInfo()    
            },
            submitEdit(){
                this.$axios({
                    url: base.baseUrl+"/school/agent/edit-user-info",
                    method: "POST",
                    header: { 'content-type': 'application/x-www-form-urlencoded' },
                    data:{
                        token:localStorage.token,
                        userid:this.userid,
                        password:this.userInfo.password?md5(this.userInfo.password):'',
                        email:this.userInfo.email,
                        realname:this.userInfo.realname,
                        enname:this.userInfo.enname,
                        mobile:this.userInfo.mobile,
                        qq:this.userInfo.qq,
                        skype:this.userInfo.skype,
                        roleid:this.userInfo.roleid
                    },
                    transformRequest: [function (data) {
                        let ret = ''
                        for (let it in data) {
                            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                        }
                        return ret
                    }],
                }).then(res => {
                    this.alertTip(res.data.msg)
                    if(res.data.code==200){
                        this.dialogFormVisible1 = false
                        this.getUserList()
                    }
                });
            },
            alertTip(msg){
                this.$alert(msg, '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                        this.$message({
                            type: 'info',
                        });
                    }
                });
            },
            // // 在职异常
            // open2(uid) {
            //     this.dialogFormVisible2=true
            //     this.userid=uid
            //     this.$confirm('确定要设置该用户为在职异常吗?', '提示', {
            //         confirmButtonText: '确定',
            //         cancelButtonText: '取消',
            //         type: 'warning'
            //     }).then(() => {
            //         this.state=2
            //         this.setStatus()
            //     }).catch(() => {
            //         this.$message({
            //             type: 'info',
            //             message: '已取消'
            //         });          
            //     });
            // },
            // 离职
            open3(uid) {
                this.dialogFormVisible3=true
                this.userid=uid
                this.$confirm('确定要设置该用户为离职吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.state=3
                    this.setStatus()
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });          
                });
            },
            setStatus(){
                this.$axios({
                    url: base.baseUrl+"/school/agent/edit-user-info",
                    method: "POST",
                    header: { 'content-type': 'application/x-www-form-urlencoded' },
                    data:{
                        token:localStorage.token,
                        state:this.state,
                        userid:this.userid
                    },
                    transformRequest: [function (data) {
                        let ret = ''
                        for (let it in data) {
                            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                        }
                        return ret
                    }],
                }).then(res => {
                    this.alertTip(res.data.msg)
                });
            }
        },
        created(){
            this.getUserList()
            this.getRoleList()
        }
    }
</script>
<style lang="less" scoped>
.page_block{
    position: absolute;
    margin-top:12px;
    right: 5%;
}
    @media screen and (max-width:1700px){
        .el-form--inline{
            width: 1400px;
        }  
    }
    .backUserManage{
        .experience_inputs{
            height: 60px;
            box-sizing: border-box;
            background: #f5f5f5;
            padding-top: 10px;
            display: flex;
            .creatBtn{
                width: 240px;
                cursor: pointer;
            }
            .operate_inputs{
                // padding: 15px 30px;
                height: 70px;
                box-sizing: border-box;
                button{
                    width: 130px;
                    height: 38px;
                    border-radius: 4px;
                    border: none;
                }
                .search_btn{       
                    background-color: #ff5263;
                }
                .reset_btn{
                    background-color: #808080;
                }
            }
        }
    }
</style>

